<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>将两个数组合并 | Awesome-笔记</title>
    <meta name="generator" content="VuePress 1.9.10">
    <link rel="icon" href="icons/favicon.ico">
    <meta name="description" content="">
    <meta name="author" content="热爱生活，喜欢睡觉">
    <meta name="about" content="这是一个专门用于记录笔记的静态资源网站">
    
    <link rel="preload" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css" as="style"><link rel="preload" href="/awesome-notebook/assets/js/app.5520c9b0.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/2.778bb4ad.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/1.50b457b8.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/30.645d0efa.js" as="script"><link rel="prefetch" href="/awesome-notebook/assets/js/10.325b9f09.js"><link rel="prefetch" href="/awesome-notebook/assets/js/11.c62b6b34.js"><link rel="prefetch" href="/awesome-notebook/assets/js/12.ecdb524b.js"><link rel="prefetch" href="/awesome-notebook/assets/js/13.3f3f6a36.js"><link rel="prefetch" href="/awesome-notebook/assets/js/14.eb7a3d07.js"><link rel="prefetch" href="/awesome-notebook/assets/js/15.114dfd5c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/16.85253907.js"><link rel="prefetch" href="/awesome-notebook/assets/js/17.c2838453.js"><link rel="prefetch" href="/awesome-notebook/assets/js/18.3256f17f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/19.d8afd0ae.js"><link rel="prefetch" href="/awesome-notebook/assets/js/20.10e47ab9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/21.33b300c9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/22.b7c97fbe.js"><link rel="prefetch" href="/awesome-notebook/assets/js/23.e9994ecc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/24.8cc3e1e8.js"><link rel="prefetch" href="/awesome-notebook/assets/js/25.dedb1585.js"><link rel="prefetch" href="/awesome-notebook/assets/js/26.9422829f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/27.9802cd87.js"><link rel="prefetch" href="/awesome-notebook/assets/js/28.d9f287bc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/29.dc9b14bd.js"><link rel="prefetch" href="/awesome-notebook/assets/js/3.af33e5d6.js"><link rel="prefetch" href="/awesome-notebook/assets/js/31.164808cf.js"><link rel="prefetch" href="/awesome-notebook/assets/js/32.59287e4c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/33.3031be3e.js"><link rel="prefetch" href="/awesome-notebook/assets/js/34.4ce6ff0d.js"><link rel="prefetch" href="/awesome-notebook/assets/js/35.d58eebcc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/4.45665f8a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/5.7098d77a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/6.0c0a0f39.js"><link rel="prefetch" href="/awesome-notebook/assets/js/7.6a854e57.js"><link rel="prefetch" href="/awesome-notebook/assets/js/vendors~docsearch.5e19b665.js">
    <link rel="stylesheet" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/awesome-notebook/" class="home-link router-link-active"><img src="/awesome-notebook/imgs/hero.png" alt="Awesome-笔记" class="logo"> <span class="site-name can-hide">Awesome-笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>将两个数组合并</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#防抖" class="sidebar-link">防抖</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#节流" class="sidebar-link">节流</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#数组扁平化" class="sidebar-link">数组扁平化</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#判断输入是否为网址" class="sidebar-link">判断输入是否为网址</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#实现一个-promise-finally" class="sidebar-link">实现一个 Promise.finally</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#实现一个-sleep-函数" class="sidebar-link">实现一个 sleep 函数</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#对象转数组" class="sidebar-link">对象转数组</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#树算法" class="sidebar-link">树算法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#深度优先遍历" class="sidebar-link">深度优先遍历</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#广度优先遍历" class="sidebar-link">广度优先遍历</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#数组扁平化-一" class="sidebar-link">数组扁平化（一）</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#数组扁平化-二" class="sidebar-link">数组扁平化（二）</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#数组合二为一" class="sidebar-link">数组合二为一</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#两个数组的交集" class="sidebar-link">两个数组的交集</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#字符串大小写取反" class="sidebar-link">字符串大小写取反</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#旋转数组" class="sidebar-link">旋转数组</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#数组模拟" class="sidebar-link">数组模拟</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#this-指向" class="sidebar-link">this 指向</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#全局环境与全局函数" class="sidebar-link">全局环境与全局函数</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#对象方法中" class="sidebar-link">对象方法中</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#dom-事件" class="sidebar-link">DOM 事件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#定时器" class="sidebar-link">定时器</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#构造函数" class="sidebar-link">构造函数</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#箭头函数" class="sidebar-link">箭头函数</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#改变-this-指向" class="sidebar-link">改变 this 指向</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#function-prototype-call" class="sidebar-link">Function.prototype.call()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#function-prototype-apply" class="sidebar-link">Function.prototype.apply()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#function-prototype-bind" class="sidebar-link">Function.prototype.bind()</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#this-指向问题" class="sidebar-link">this 指向问题</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#数组相关" class="sidebar-link">数组相关</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#读取数组中第一个数据与第-10-个数据哪个快" class="sidebar-link">读取数组中第一个数据与第 10 个数据哪个快</a></li></ul></li><li><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#判断是否为数组的几种方法" class="sidebar-link">判断是否为数组的几种方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#object-prototype-tostring-call" class="sidebar-link">Object.prototype.toString.call()</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#instanceof" class="sidebar-link">instanceof</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E4%B8%89%E4%BB%B6%E5%A5%97/js/js%E9%9D%A2%E8%AF%95%E9%A2%98.html#array-isarray" class="sidebar-link">Array.isArray()</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="将两个数组合并"><a href="#将两个数组合并" class="header-anchor">#</a> 将两个数组合并</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;A2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;B1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;B2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;C1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;C2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;D1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;D2&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 用于标识需要进行插入的数字</span>
<span class="token keyword">let</span> a2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> item <span class="token operator">+</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//先进行遍历，由于js的sort函数可以对字母进行排序，经过sort()函数之后，A、B、C、D字母都聚在了一起</span>
<span class="token keyword">let</span> a3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>a1<span class="token punctuation">,</span> <span class="token operator">...</span>a2<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">//如果包含标识符3，就去掉标识符</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&quot;3&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> item<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="两个有序数组的中位数"><a href="#两个有序数组的中位数" class="header-anchor">#</a> 两个有序数组的中位数</h1> <ul><li>给定两个大小 m 和 n</li></ul> <h1 id="防抖和节流"><a href="#防抖和节流" class="header-anchor">#</a> 防抖和节流</h1> <ul><li>防抖：用户触发操作过于频繁，只需要最后一次事件的操作</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//此处的场景是拿着用户的输入结果与后端服务器进行ajax交互，如果每输入一次就发送一个ajax请求将会对性能的消耗非常大</span>
input<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">//全局写法</span>
<span class="token keyword">let</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> t <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token comment">// 下面函数保证了只有最后一个settimeout被保留</span>
input<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//当onchange事件被触发时，执行该函数</span>
  <span class="token comment">//每次执行时都判断前面是否还有timeout，有则清除</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>t <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">clearTimeout</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//每次执行都将t重新赋值一个timeout</span>
  t <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//业务代码</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="防抖"><a href="#防抖" class="header-anchor">#</a> 防抖</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--
此处的一个报错：Cannot set properties of null (setting 'oninput')
原因：&lt;script&gt;标签写在了&lt;header&gt;中，导致JavaScript代码在DOM元素加载之前执行
解决办法：通过将代码放在 window.onload 事件处理函数中，或者HTML的 body 标签最后面
--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">let</span> inp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  inp<span class="token punctuation">.</span>oninput <span class="token operator">=</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//该函数即为settimeout中的参数Fn</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//使用call后，this指向DOM元素</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">//闭包写法</span>
  <span class="token comment">// 上面代码存在的问题：1、引入了全局变量和全局函数 2、防抖代码和业务代码混在了一起，不利于维护</span>
  <span class="token comment">//定义防抖函数</span>
  <span class="token keyword">function</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token parameter">fn<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> t <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token comment">//事件函数this指向input DOM元素</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>t <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">clearTimeout</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token comment">//每次执行都将t重新赋值一个timeout</span>
      t <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//call改变了调用fn函数的对象，不使用call，由window对象调用，使用call则由DOM元素调用该函数，this指向也就是DOM元素</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="节流"><a href="#节流" class="header-anchor">#</a> 节流</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//控制比较耗费性能的代码的执行次数</span>
<span class="token keyword">let</span> flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function-variable function">onscroll</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>flag<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;hello world&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  flag <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">//封装</span>

window<span class="token punctuation">.</span>onscroll <span class="token operator">=</span> <span class="token function">throttle</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;hello world&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">throttle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">fn<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>flag<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    flag <span class="token operator">=</span> flase<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="手写代码"><a href="#手写代码" class="header-anchor">#</a> 手写代码</h1> <h2 id="数组扁平化"><a href="#数组扁平化" class="header-anchor">#</a> 数组扁平化</h2> <blockquote><p>var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]
将数组扁平化，去除其中重复数据，得到一个升序且不重复的数组</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//方法一：</span>
Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">-</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//方法二</span>
arr
  <span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;,&quot;</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> a <span class="token operator">-</span> b<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>Number<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//方法三：重新定义flat和unique方法</span>
<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">flat</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>
    <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">?</span> item<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">unique</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
  arr
    <span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">unique</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">-</span> b<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ]</span>
</code></pre></div><h2 id="判断输入是否为网址"><a href="#判断输入是否为网址" class="header-anchor">#</a> 判断输入是否为网址</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isUrl</span><span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="实现一个-promise-finally"><a href="#实现一个-promise-finally" class="header-anchor">#</a> 实现一个 Promise.finally</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Promise</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">finally</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> <span class="token constant">P</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>constructor<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> value<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">throw</span> error<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><blockquote><p>上面代码，为什么需要 Promise.resolve(callback()).then(() =&gt; value)，而不能直接执行 callback, return value？
因为 callback 如果是个异步操作，返回 promise 呢.希望等 callback 执行完再接着执行</p></blockquote> <h2 id="实现一个-sleep-函数"><a href="#实现一个-sleep-函数" class="header-anchor">#</a> 实现一个 sleep 函数</h2> <ul><li>Promise 实现</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
</code></pre></div><ul><li>async/await 实现</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
</code></pre></div><ul><li>Generator 实现</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
</code></pre></div><h2 id="对象转数组"><a href="#对象转数组" class="header-anchor">#</a> 对象转数组</h2> <ul><li>原始对象：{1:222, 2:123, 5:888}</li> <li>目的数组：[222, 123, null, null, 888, null, null, null, null, null, null, null]</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">1</span><span class="token operator">:</span> <span class="token number">222</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token number">123</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token operator">:</span> <span class="token number">888</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> result <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">12</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>
  <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> obj<span class="token punctuation">[</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token keyword">null</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 或者直接  Array.from({ length: 12 },(_, index) =&gt; obj[index + 1] || null)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="算法"><a href="#算法" class="header-anchor">#</a> 算法</h1> <h2 id="树算法"><a href="#树算法" class="header-anchor">#</a> 树算法</h2> <h3 id="深度优先遍历"><a href="#深度优先遍历" class="header-anchor">#</a> 深度优先遍历</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> nodeList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">deepTraversal</span><span class="token punctuation">(</span><span class="token parameter">node<span class="token punctuation">,</span> nodeList</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>node <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    nodeList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> children <span class="token operator">=</span> node<span class="token punctuation">.</span>children<span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> children<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">deepTraversal</span><span class="token punctuation">(</span>children<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> nodelist<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> nodeList<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="广度优先遍历"><a href="#广度优先遍历" class="header-anchor">#</a> 广度优先遍历</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> <span class="token function-variable function">widthTraversal2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> nodes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> stack <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    stack<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>stack<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> item <span class="token operator">=</span> stack<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> children <span class="token operator">=</span> item<span class="token punctuation">.</span>children<span class="token punctuation">;</span>
      nodes<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// 队列，先进先出</span>
      <span class="token comment">// nodes = [] stack = [parent]</span>
      <span class="token comment">// nodes = [parent] stack = [child1,child2,child3]</span>
      <span class="token comment">// nodes = [parent, child1] stack = [child2,child3,child1-1,child1-2]</span>
      <span class="token comment">// nodes = [parent,child1,child2]</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> children<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        stack<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>children<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> nodes<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="数组扁平化-一"><a href="#数组扁平化-一" class="header-anchor">#</a> 数组扁平化（一）</h2> <ul><li>实现 flatten 函数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//迭代法</span>
<span class="token keyword">function</span> <span class="token function">flatten</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">while</span> <span class="token punctuation">(</span>array<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>array<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> array<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">//递归法</span>
<span class="token keyword">function</span> <span class="token function">flatten</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> array<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> cur</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token operator">...</span>val<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token function">flatten</span><span class="token punctuation">(</span>cur<span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>val<span class="token punctuation">,</span> cur<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">flatten</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  array<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>
    <span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> cur</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
      Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>cur<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token operator">...</span>acc<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token function">flatten</span><span class="token punctuation">(</span>cur<span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>acc<span class="token punctuation">,</span> cur<span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="数组扁平化-二"><a href="#数组扁平化-二" class="header-anchor">#</a> 数组扁平化（二）</h2> <ul><li>去除数组中的重复数据，得到一个升序且不重复的数组</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//方法一：</span>
Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">-</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//方法二：</span>
arr
  <span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;,&quot;</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">-</span> b<span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>Number<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//方法三：</span>
<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">flat</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>
    <span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">?</span> item<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">unique</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">sort</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">-</span> b<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">unique</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span>sort<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ]</span>
</code></pre></div><h2 id="数组合二为一"><a href="#数组合二为一" class="header-anchor">#</a> 数组合二为一</h2> <ul><li>数组一：['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2']</li> <li>数组二：['A', 'B', 'C', 'D']</li> <li>目的数组：['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;A2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;B1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;B2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;C1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;C2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;D1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;D2&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> a2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;A&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;B&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;C&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;D&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> a3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>a1<span class="token punctuation">,</span> <span class="token operator">...</span>a2<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&quot;3&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> item<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="两个数组的交集"><a href="#两个数组的交集" class="header-anchor">#</a> 两个数组的交集</h2> <ul><li>思路：空间换时间，使用一个 hash 存储第一个数组中每个元素的出现次数，然后遍历数组 2</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">list1<span class="token punctuation">,</span> list2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> item <span class="token keyword">of</span> list1<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>map<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      map<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      map<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> n <span class="token keyword">of</span> list2<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>map<span class="token punctuation">[</span>n<span class="token punctuation">]</span> <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
      map<span class="token punctuation">[</span>n<span class="token punctuation">]</span><span class="token operator">--</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="字符串大小写取反"><a href="#字符串大小写取反" class="header-anchor">#</a> 字符串大小写取反</h2> <ul><li>split()+join 方法</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">processing</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> arr <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">let</span> newArr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//是大写字符，返回小写字符</span>
    <span class="token comment">//是小写字符，返回大写字符</span>
    <span class="token keyword">return</span> val <span class="token operator">===</span> val<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> val<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> val<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> newArr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>正则替换</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;AbCdEf&quot;</span><span class="token punctuation">;</span>
str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>
  <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-zA-Z]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span>
  <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-z].test(a)?a.toUpperCase():a.toLowerCase()</span><span class="token regex-delimiter">/</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="旋转数组"><a href="#旋转数组" class="header-anchor">#</a> 旋转数组</h2> <blockquote><p>输入: [1, 2, 3, 4, 5, 6, 7] k = 3
输出: [5, 6, 7, 1, 2, 3, 4]</p></blockquote> <blockquote><p>输入: [-1, -100, 3, 99] 和 k = 2
输出: [3, 99, -1, -100]</p></blockquote> <ul><li>pop 和 slice 实现</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> k</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> k<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    nums<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>nums<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> nums<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>索引实现</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> k</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> step <span class="token operator">=</span> k <span class="token operator">%</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
  <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span>step<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> step<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="数组模拟"><a href="#数组模拟" class="header-anchor">#</a> 数组模拟</h2> <ul><li>模拟栈结构,后进先出
<blockquote><p>pop()末尾删除，push()末尾添加</p></blockquote></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
</code></pre></div><ul><li>模拟队列结构，先进先出
<blockquote><p>pop()末尾删除，unshift()头部添加
或
push()末尾添加，shift()头部删除</p></blockquote></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
</code></pre></div><h1 id="其它问题"><a href="#其它问题" class="header-anchor">#</a> 其它问题</h1> <h2 id="this-指向"><a href="#this-指向" class="header-anchor">#</a> this 指向</h2> <h3 id="全局环境与全局函数"><a href="#全局环境与全局函数" class="header-anchor">#</a> 全局环境与全局函数</h3> <ul><li>全局环境下 this 为 window</li> <li>全局函数中的 this 也是 window（全局函数其实是 window(全局对象)的方法）</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//window</span>

<span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//相当于window.fun()      //window</span>
</code></pre></div><h3 id="对象方法中"><a href="#对象方法中" class="header-anchor">#</a> 对象方法中</h3> <ul><li>对象方法中的 this 指向调用这个方法的对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> cat <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
cat<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// cat</span>
</code></pre></div><h3 id="dom-事件"><a href="#dom-事件" class="header-anchor">#</a> DOM 事件</h3> <ul><li>DOM 事件中的 this 指向该 dom 对象</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>此处this指向button自身<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="定时器"><a href="#定时器" class="header-anchor">#</a> 定时器</h3> <ul><li>在定时器或者 setInterval 中，<code>this</code>指向全局对象</li> <li>原因：定时器或者 setInterval 是全局函数，其中的函数就是由 window 调用的</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//window</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="构造函数"><a href="#构造函数" class="header-anchor">#</a> 构造函数</h3> <ul><li>构造函数中的 this 指向关键字<code>new</code>新创建出来的对象</li> <li>拓展：<strong>new 关键字做了什么</strong>：创建一个对象，并将构造函数中的 this 指向创建出来的对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token constant">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">&quot;小明&quot;</span><span class="token punctuation">;</span> <span class="token comment">//此处this指向新创建出来的对象f</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> f <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//F{name:'小明'}</span>
</code></pre></div><h3 id="箭头函数"><a href="#箭头函数" class="header-anchor">#</a> 箭头函数</h3> <ul><li>箭头函数没有 this</li> <li>口诀 1：普通函数==谁调用指向谁==，箭头函数==在哪里定义指向谁==</li> <li>口诀 2：箭头函数外指向谁，其 this 就指向谁</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> cat <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//window</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//cat</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="改变-this-指向"><a href="#改变-this-指向" class="header-anchor">#</a> 改变 this 指向</h2> <h3 id="function-prototype-call"><a href="#function-prototype-call" class="header-anchor">#</a> Function.prototype.call()</h3> <ul><li>语法：func.call(thisArg, arg1, arg2,...)</li> <li>作用：指定函数内部 this 指向（函数执行作用域），然后在该作用域中调用该函数</li> <li>参数：<strong>thisArg</strong>指定函数 func 的执行作用域，该参数为空、null、undefined 时，默认传入全局对象。<strong>其他参数 arg1...argN</strong>指定函数 func 执行时所需要的参数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//全局函数，此处this指向为window</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> window<span class="token punctuation">;</span> <span class="token comment">//true</span>
<span class="token function">func</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">===</span> obj<span class="token punctuation">;</span> <span class="token comment">//true</span>
</code></pre></div><blockquote><p>上面代码中，func.call(obj)改变了全局函数中的 this 指向为对象 obj，并在对象 obj 的作用域中运行函数 func</p></blockquote> <ul><li>call()的参数 thisArg 默认值</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">&quot;全局对象window&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;对象obj&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">printName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//默认传入全局对象</span>
<span class="token function">printName</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 全局对象window</span>
<span class="token function">printName</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 全局对象window</span>
<span class="token function">printName</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 全局对象window</span>
<span class="token function">printName</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 全局对象window</span>
<span class="token comment">//传入指定对象</span>
<span class="token function">printName</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 对象obj</span>
</code></pre></div><ul><li>call()的其他参数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">add</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3</span>
</code></pre></div><h4 id="应用-调用对象的原生方法"><a href="#应用-调用对象的原生方法" class="header-anchor">#</a> 应用：调用对象的原生方法</h4> <ul><li>解决对象继承的方法被同名函数覆盖掉的问题</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">&quot;toString&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>

<span class="token comment">// 覆盖掉继承的 hasOwnProperty 方法</span>
obj<span class="token punctuation">.</span><span class="token function-variable function">hasOwnProperty</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">&quot;toString&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token comment">//调用原生方法</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">&quot;toString&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre></div><ul><li><code>Object.prototype.toString.call()</code>判断 js 对象的数据类型</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">&quot;An&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;[object String]&quot;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;[object Number]&quot;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;[object Symbol]&quot;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;[object Null]&quot;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;[object Undefined]&quot;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;[object Function]&quot;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;[object Object]&quot;</span>
</code></pre></div><h3 id="function-prototype-apply"><a href="#function-prototype-apply" class="header-anchor">#</a> Function.prototype.apply()</h3> <ul><li>语法：func.apply(thisArg, argsArray)</li> <li>作用：==同 call 方法==</li> <li>参数：<strong>thisArg</strong>==同 call 方法==，<strong>其他参数 argsArray</strong>指定函数 func 执行时所需要的参数(<strong>需以数组形式</strong>)</li></ul> <h4 id="应用-1-返回数组中最大元素"><a href="#应用-1-返回数组中最大元素" class="header-anchor">#</a> 应用 1:返回数组中最大元素</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//15</span>
</code></pre></div><h4 id="应用-2-将数组中空元素变为-undefined"><a href="#应用-2-将数组中空元素变为-undefined" class="header-anchor">#</a> 应用 2:将数组中空元素变为 undefined</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;a&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token function">Array</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//[&quot;a&quot;,undefined,&quot;b&quot;]</span>
</code></pre></div><blockquote><p>arr.forEach()循环在遇到空元素会直接跳过，而遇到 undefined 时则会正常处理</p></blockquote> <h4 id="应用-3-绑定回调函数的对象"><a href="#应用-3-绑定回调函数的对象" class="header-anchor">#</a> 应用 3:绑定回调函数的对象</h4> <ul><li>由于<code>call()</code>与<code>apply()</code>不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token operator">===</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">//</span>
<span class="token keyword">var</span> <span class="token function-variable function">func</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  obj<span class="token punctuation">.</span><span class="token function">func</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">//或 obj.func.call(obj)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// jQuery 的写法</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#button&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> func<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="function-prototype-bind"><a href="#function-prototype-bind" class="header-anchor">#</a> Function.prototype.bind()</h3> <ul><li>语法：func.bind(thisArg, arg1, arg2,....)</li> <li>作用：创建一个新函数，当调用该新函数时，它会调用原始函数并将其 this 关键字设置为给定的值</li></ul> <blockquote><p>场景引入</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
d<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1481869925657</span>

<span class="token keyword">var</span> printTime <span class="token operator">=</span> d<span class="token punctuation">.</span>getTime<span class="token punctuation">;</span>
<span class="token function">printTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Uncaught TypeError: this is not a Date object</span>

<span class="token keyword">var</span> printTime_2 <span class="token operator">=</span> d<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">printTime_2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1481869925657</span>
</code></pre></div><blockquote><p>上面代码中，我们将 d.getTime()方法赋给变量 printTime，然后调用 print()就报错了，这是因为 getTime()方法内部的 this，绑定 Date 对象的实例，赋给变量 printTime 后，内部的 this 已经==不指向 Date 对象的实例==了，而 bind()方法将 getTime()方法内部的 this 绑定到 d 对象</p></blockquote> <ul><li>bind 将 this 绑定到其他对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> counter <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  <span class="token function-variable function">say</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> func <span class="token operator">=</span> counter<span class="token punctuation">.</span><span class="token function">say</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//100</span>
</code></pre></div><blockquote><p>上面代码中，bind()方法将 say()方法内部的 this，绑定到 obj 对象，结果调用 func 方法时返回的就是<code>obj.count</code></p></blockquote> <ul><li>bind()函数传参</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//原始函数</span>
<span class="token keyword">var</span> <span class="token function-variable function">print</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">我有两个朋友</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>friend1<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">、</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>friend2<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">，第一个</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>x<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">岁,第二个</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>y<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">岁</span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">friend1</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">friend2</span><span class="token operator">:</span> <span class="token string">&quot;李四&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">//新函数</span>
<span class="token keyword">var</span> newPrint <span class="token operator">=</span> <span class="token function">print</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">newPrint</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//我有两个朋友张三、李四，第一个15岁,第二个20岁</span>
</code></pre></div><blockquote><p>上面代码中，bind()中向原始函数传递的参数为 15，新函数向原始函数传递的参数为 20，显然==bind 传递的参数会排在前面==</p></blockquote> <h4 id="注意"><a href="#注意" class="header-anchor">#</a> 注意</h4> <ul><li>bind()每次返回一个新的函数，绑定事件时需要注意</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//下面click事件绑定了有一个匿名函数，会导致无法取消绑定</span>
element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> o<span class="token punctuation">.</span><span class="token function">m</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> o<span class="token punctuation">.</span><span class="token function">m</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//正确写法</span>
<span class="token keyword">var</span> listener <span class="token operator">=</span> o<span class="token punctuation">.</span><span class="token function">m</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> listener<span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> listener<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>与 call 结合使用</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1]</span>
<span class="token comment">// 等同于</span>
<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 等价于</span>
<span class="token keyword">var</span> slice <span class="token operator">=</span> <span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>slice<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="this-指向问题"><a href="#this-指向问题" class="header-anchor">#</a> this 指向问题</h2> <ul><li>普通函数中的 this 指向 window</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//此处相当于window.test(),也就是由window对象进行调用，故该函数中的this指向window</span>
</code></pre></div><ul><li>普通对象的函数属性中的 this 指向该对象本身</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
  <span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token function-variable function">test</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
obj<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>    <span class="token comment">//obj</span>
</code></pre></div><ul><li>构造函数中的 this 指向 new 出来的实例</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Test</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> test <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Test</span><span class="token punctuation">(</span><span class="token string">&quot;张三&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>test<span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//张三,Test{name:'张三'}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//下面的构造函数利用Object.definproperty实现了一个自存档对象</span>
<span class="token keyword">function</span> <span class="token function">Archiver</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> temperature <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> archive <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&quot;temperature&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;get!&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> temperature<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">set</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      temperature <span class="token operator">=</span> value<span class="token punctuation">;</span>
      archive<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">val</span><span class="token operator">:</span> temperature <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">getArchive</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> archive<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> arc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Archiver</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arc<span class="token punctuation">.</span>temperature<span class="token punctuation">;</span> <span class="token comment">// 'get!'</span>
arc<span class="token punctuation">.</span>temperature <span class="token operator">=</span> <span class="token number">11</span><span class="token punctuation">;</span>
arc<span class="token punctuation">.</span>temperature <span class="token operator">=</span> <span class="token number">13</span><span class="token punctuation">;</span>
arc<span class="token punctuation">.</span><span class="token function">getArchive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [{ val: 11 }, { val: 13 }]</span>
</code></pre></div><ul><li>原型上的方法，内部 this 指向仍然是构造函数实例化出来的对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Test</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">say</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//张三</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Test{name:'张三'}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>DOM 元素上绑定的处理函数，内部的 this 指向为 DOM 元素本身</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//&lt;button id=&quot;mybtn&quot;&gt;点我&lt;/button&gt;</span>
<span class="token keyword">var</span> Btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;mybtn&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//&lt;button id=&quot;mybtn&quot;&gt;点我&lt;/button&gt;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//定时器中的setTimeout中的this指向window</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//window{...}</span>
</code></pre></div><h1 id="性能"><a href="#性能" class="header-anchor">#</a> 性能</h1> <h2 id="数组相关"><a href="#数组相关" class="header-anchor">#</a> 数组相关</h2> <h3 id="读取数组中第一个数据与第-10-个数据哪个快"><a href="#读取数组中第一个数据与第-10-个数据哪个快" class="header-anchor">#</a> 读取数组中第一个数据与第 10 个数据哪个快</h3> <ul><li>一样快</li> <li>所有的数组其实是对象，其“索引”看起来是数字，其实会被转换成字符串，作为属性名（对象的 key）来使用。所以无论是取第 1 个还是取第 10 万个元素，都是用 key 精确查找哈希表的过程，其消耗时间大致相同</li></ul> <h2 id="判断是否为数组的几种方法"><a href="#判断是否为数组的几种方法" class="header-anchor">#</a> 判断是否为数组的几种方法</h2> <h3 id="object-prototype-tostring-call"><a href="#object-prototype-tostring-call" class="header-anchor">#</a> Object.prototype.toString.call()</h3> <p><strong>关于 Object.prototype.toString()</strong>
每一个继承 Object 的对象都有<code>toString</code>方法，该方法没有被重写时，会返回<code>object Type</code>(其中 type 为对象的 js 类型)，但是除了 Object 对象能够返回<code>[object Object]</code>外，很多内置对象（如数组 Array、日期 Date 等）都重写了 toString() 方法以返回特定的字符串格式。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//&quot;[object Object]&quot;</span>
a<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//&quot;1,2&quot;</span>
</code></pre></div><ul><li>使用 call 或者 apply 方法来改变 toString 方法的执行上下文</li> <li>该方法能够判断所有 js 数据类型</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//相当于arr调用了未被重写过的toString()方法，也就是arr.toString(),</span>
<span class="token comment">//此处的toString()!==Array.prototype.toString()        toString()===Object.prototype.toString()</span>
</code></pre></div><h3 id="instanceof"><a href="#instanceof" class="header-anchor">#</a> instanceof</h3> <p><strong>关于原型链</strong></p> <ul><li><p>prototype:构造函数的一个属性</p></li> <li><p>_<em>proto</em>_:实例对象的一个属性</p></li> <li><p>每个 JavaScript 对象都有一个内部链接，指向它的原型对象。这个原型对象也是一个普通对象，也有自己的原型，层层递进，直到一个对象的原型为 null。这个 null 就是原型链的终点。</p></li> <li><p>每个构造函数都有一个 prototype 属性，这个属性是一个指针，指向一个对象，该对象的用途是包含可以由特定类型的所有实例共享的属性和方法。当创建了一个新的对象实例后，这个实例的<strong>proto</strong>属性（在非规范中，但大多数浏览器支持）会指向构造函数的 prototype 对象。</p></li> <li><p>当一个对象试图访问一个属性时，如果这个对象内部不存在这个属性，那么 JavaScript 会在这个对象的原型（也就是<strong>proto</strong>指向的对象）上寻找这个属性，然后是原型的原型，依此类推，直到找到这个属性或者到达原型链的终点 null</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> test <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Test</span><span class="token punctuation">.</span>prototype <span class="token operator">===</span> test<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype <span class="token operator">===</span> <span class="token class-name">Test</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//null</span>

<span class="token class-name">Test</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>test<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/**
 * 以对象为基准，以__proto__为连接的直到object.prototype的链条就称原型链
 * test{
 *  a:1,
 *  __proto__: Test.prototype={
 *    b:2,
 *    __proto__:Object.prototype={
 *      c:3
 *    }
 *  }
 * }
 *
 *
 *
 *
 */</span>
</code></pre></div><ul><li><p>instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype</p></li> <li><p>instanceof 只能用来判断对象类型，原始类型不可以。<code>所有对象类型 instanceof Object</code> 都是 true。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div><h3 id="array-isarray"><a href="#array-isarray" class="header-anchor">#</a> Array.isArray()</h3> <ul><li>只能判断对象是否为数组</li></ul> <h1 id="如何解决跨域"><a href="#如何解决跨域" class="header-anchor">#</a> 如何解决跨域</h1> <ul><li><p>跨域：</p></li> <li><p>解决方案</p> <blockquote><p>CORS，在服务器端设置几个响应头，如 <code>Access-Control-Allow-Origin: *</code>
Reverse Proxy，在 nginx/traefik/haproxy 等反向代理服务器中设置为同一域名
JSONP，详解见 JSONP 的原理是什么，如何实现</p></blockquote></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/awesome-notebook/assets/js/app.5520c9b0.js" defer></script><script src="/awesome-notebook/assets/js/2.778bb4ad.js" defer></script><script src="/awesome-notebook/assets/js/1.50b457b8.js" defer></script><script src="/awesome-notebook/assets/js/30.645d0efa.js" defer></script>
  </body>
</html>
